<template>
  <div>
    <div>{{words}}</div>
    <van-empty v-if="meetingDetail.length===0" image="search" description="没有数据" />
    <div v-else class>
      <van-row class="all_check" v-if="showAllCheck">
        <van-col span="12">
          <van-checkbox v-model="checked" @click="handleIsAllCheck" shape="square">全选</van-checkbox>
        </van-col>
        <van-col class="app_meetDe_item_right" span="12" @click="changeRange">
          <van-icon class="icon_filter" name="descending" size="14" color="#1989fa" />按审批时间排列
        </van-col>
      </van-row>
      <div
        v-for="(item, index) in meetingDetail"
        :key="index"
        class="app_meetDe_item pad15 van-hairline--bottom"
      >
        <van-row>
          <van-col v-if="item.Status==='已提交审批'" span="2">
            <van-checkbox v-model="item.isCheck" @change="rehandleIsAllCheck" shape="square"></van-checkbox>
          </van-col>
          <van-col class="app_meetDe_item_right" :span="item.Status==='已提交审批'?'22':'24'">
            <p>姓名：{{item.name}}</p>
            <p>医院：{{item.hospital}}</p>
            <p>最晚审批时限：{{item.deadline}}</p>
            <van-row>
              <van-col span="12">
                <p>火车订单数量：{{item.tAmount}}</p>
                <p>飞机订单数量：{{item.fAmount}}</p>
                <p>
                  订单价格：
                  <span class="price">￥{{item.orderFare}}</span>
                </p>
              </van-col>
              <van-col span="8">
                <p v-if="!showCancel">已出票：{{ item.alx[0] }}</p>
	          		<p v-if="showCancel">已取消：{{ item.alx[3] }}</p>
		            <p>退票：{{ item.alx[1] }}</p>
		            <p>改期：{{ item.alx[2] }}</p>
              </van-col>
            </van-row>
            <div class="approvel_item_btn">
              <van-button type="info" size="mini" @click="goApprovalIndividual(item)">详情</van-button>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { log } from "util"; 
export default {
  props: {
    meetingDetail: {
      type: Array,
      default: [],
    },
    showAllCheck: {
      type: Boolean,
      default: false,
    },
    eventid: {
      type: String,
      default: "",
    },
    words: {
      type: String,
      default: "",
    },
    showCancel:{
      type:Boolean,
      default:false,
    }
  },
  data() {
    return {
      checked: false,
    };
  },
  created() {},
  methods: {
    // 是否全选
    handleIsAllCheck() {
      this.meetingDetail.map((v) => (v.isCheck = this.checked));
    },
    rehandleIsAllCheck() {
      let arr = this.meetingDetail.reduce((p, c) => {
        if (c.isCheck) {
          p.push(c);
        }
        return p;
      }, []);
      this.checked = arr.length === this.meetingDetail.length;
    },
    // 修改审批顺序
    changeRange() {
      this.meetingDetail.sort(function (a, b) {
        return new Date(a.deadlineapprovel) > new Date(b.deadlineapprovel)
          ? 1
          : -1;
      });
    },
    goApprovalIndividual(item) {
      sessionStorage.setItem("trdetail", JSON.stringify(item));
      const PaxStaffNo = item.ExorderList[0].PaxStaffNo;
      this.$router.push({
        path: "/approvelIndividual",
        query: { PaxStaffNo: PaxStaffNo, eventid: this.eventid,Status:item.Status},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.all_check {
  padding: 15px 15px 0px 15px;
  .app_meetDe_item_right {
    text-align: right;
  }
  .icon_filter {
    position: relative;
    top: 2px;
  }
}
.app_meetDe_item {
  .van-checkbox {
    margin-top: 5px;
  }
  .app_meetDe_item_right {
    position: relative;
    .price {
      color: #fb304d;
    }
    .approvel_item_btn {
      position: absolute;
      bottom: 0px;
      right: 0px;
    }
  }
  p {
    line-height: 26px;
  }
}
</style>
